<template>
  <div>
    <div id="SG-list" ref="tab">
      <ul ref="tabWrapper">
        <CheckboxGroup>
          <li ref="tabitem" v-for=" goods in cart" :key="goods.index" v-if="cart.length > 0">
            <div class="icon-selector" :class="{'selector-active': goods.checked}" @click="selectGood(goods)">
              <svg t="1504061791962" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2922" xmlns:xlink="http://www.w3.org/1999/xlink" width="14" height="14">
                <path d="M908.288 127.488l-537.6 537.6-254.976-254.976L0 525.824l254.976 254.976 115.712 115.712L486.4 780.8l537.6-537.6z"
                      fill="#ffffff" p-id="2923"></path>
              </svg>
            </div>
            <img :src="goods.imgs"/>
            <section>
              <p class="f16">{{goods.nam}}</p>
              <p class="f12">{{goods.selectGuige}}</p>
              <p class="price f18"><span class="f12">￥</span>{{goods.prices}}</p>
            </section>
            <aside>
              <con-mon-list></con-mon-list>
              <add-decrsde :good="goods" @addMount="getMounts"></add-decrsde>
            </aside>
          </li>
        </CheckboxGroup>
      </ul>
    </div>
    <div class="sum-price">
      <section>
        <aside style="flex: 1; margin: 0">
          <div class="item-selector" @click="checkAll">
            <div class="icon-selector" v-bind:class="{'selector-active': checkAllFlag}">
              <svg t="1504061791962" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2922" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="12">
                <path d="M908.288 127.488l-537.6 537.6-254.976-254.976L0 525.824l254.976 254.976 115.712 115.712L486.4 780.8l537.6-537.6z"
                      fill="#ffffff" p-id="2923"></path>
              </svg>
            </div>
          </div>
          <label style="font-size: 16px;padding-left: 4px;">全选</label>
        </aside>
        <aside style="padding: 2px 13px 0 0; margin: 0">
          <p>总计:</p>
          <p style="text-align: right; color: #F95318;">￥<span style="flex: 1; display: inline-block;min-width: 20px; font-size: 18px;" v-if="totalPrice ===0">0.00</span>
            <span style="flex: 1; display: inline-block;min-width: 20px; font-size: 18px;" v-else>{{totalPrice}}</span>
          </p>
        </aside>
      </section>
      <button type="button" @click="sureOrder">提交</button>
    </div>
  </div>
</template>

<script type="ECMAScript 6">
  import conMonList from '@/components/conmon-list';
  import addDecrsde from '@/components/add-decrsde';
    export default {
        name: 'shopping-goods-list',
        components: {
          conMonList,
          addDecrsde
        },
        props: {
          goodsSelectList: Array
        },
        data () {
          return {
            sum: 0,
            checkAllFlag: false,
            selectedNum: 0,
            delFlag: false,
            cart: this.goodsSelectList,
            PayGoods: []
          };
        },
        computed: {
          /**
           *  已选商品的总额
           */
          totalPrice: function () {
            var num = 0;
            this.cart.forEach(function (item) {
              item.checked && (num += parseFloat(item.subtotal));
            });
            return num.toFixed(2);
          }
        },
        methods: {
          InitTabScroll () {
            this.$nextTick(() => {
              if (!this.scroll) {
                this.scroll = new BScroll(this.$refs.tab, {
                  startX: 0,
                  click: true,
                  scrollX: false,
                  scrollY: true,
                  mouseWheel: true
                });
              } else {
                this.scroll.refresh();
              }
            });
          },
          selectGood: function (goods) {
            // 状态值取反，并根据状态值对selectedNum进行加减
             goods.checked = !goods.checked;
             if (goods.checked) {
               this.$emit('selectGoods', goods);
               ++this.selectedNum;
             } else {
               --this.selectedNum;
             }
             // 设置全选
             this.selectedNum === this.cart.length
               ? this.checkAllFlag = true
               : this.checkAllFlag = false;
          },
          getMounts (goods) {
            if (this.cart.length > 1) {
              this.cart.forEach(allGoods => {
                if (allGoods.id === goods.id) {
                  this.$set(allGoods, 'subtotal', goods.subtotal);
                }
              });
            }
          },
          checkAll: function () {
            var self = this;
            this.checkAllFlag = !this.checkAllFlag;
            if (this.checkAllFlag) {
              this.$emit('selectAllGoods', this.cart);
            }
            this.cart.forEach(function (item) {
              if (self.checkAllFlag) {
                // 全选
                item.checked = true;
                self.selectedNum = self.cart.length;
              } else {
                // 取消全选
                item.checked = false;
                self.selectedNum = 0;
              }
            });
          },
          sureOrder () {
            this.cart.forEach(goods => {
              if (goods.checked) {
                this.PayGoods.push(goods);
              }
            });
            if (this.PayGoods.length) {
              this.$router.push('/orderSure');
              sessionStorage.setItem('PayGoods', JSON.stringify(this.PayGoods));
            } else {
              this.$Message.error('您还未选择任何支付的商品···');
            }
          }
        },
        created () {
          this.$nextTick(() => {
            this.InitTabScroll();
          });
        }
    };
</script>

<style lang="stylus" scoped>
  #SG-list
    height 100%; position: fixed;  overflow: hidden;width 100%;
    ul li
      display flex; align-items center; border-bottom 1px solid #f9f9f9; padding  16px 0 13px 0;
      .icon-selector
        position: relative; width: 19px; height: 19px; border-radius: 50%; border: 1px solid #ccc; cursor: pointer
      .selector-active
        background-color: #41B962; border-color: #41B962;
      img
         margin-left 10px; height 75px; width 75px; border-radius 4px;
      section
        margin-left 15px;
        p
         text-align left
        .price
           margin-top 10px;  color #F95318;
      aside
        flex 1; margin-top -7%; position relative; height 100%; text-align right;
  .sum-price
    display flex; width 100%; align-items center; position fixed; bottom 49px; height 50px; background #fff;
    section
      flex 1; display flex; align-items center;
      aside
        display flex; align-items center;
        .item-selector
          margin-top -5px;
          .icon-selector
           position: relative;margin-left 13px;  width: 19px; height: 19px; border-radius: 50%; border: 1px solid #ccc; cursor: pointer
          .selector-active
            background-color: #41B962; border-color: #41B962;
        &>p
          font-size 13px;
    button
      flex 0 0 160px; height 100%; background #41B962; font-size 17px; color #fff; font-weight 500; text-align center; line-height 50px;
</style>
<style lang="stylus">
  #SG-list .ivu-checkbox-group
    background #fff; padding 0 13px;
  #SG-list .ivu-checkbox-inner
    border-radius 50%;
  #SG-list .ivu-checkbox-checked .ivu-checkbox-inner
    border-color: #41B962; background-color: #41B962;
  #SG-list .ivu-checkbox+span, .ivu-checkbox-wrapper+span
    display none
  .sum-price .ivu-checkbox-wrapper
    font-size 16px;
  .sum-price .ivu-checkbox-inner
    width 19px; height 19px; border-radius 50%;
  .ivu-checkbox-inner:after
    display none
  .ivu-checkbox-indeterminate:hover .ivu-checkbox-inner
    background transparent; border-color #CCCCCC
  .ivu-checkbox-indeterminate .ivu-checkbox-inner
    background #41B962; border-color #41B962
</style>
